<template>
	<div style="margin-top: 15px">
		<el-row>
			<el-col :span="6">
				<el-card :body-style="{ padding: '0px' }" class="card leftList">
					<div v-for="(item, index) in leftList" :key="index">
						<el-icon>
							<component :is="item.icon" />
						</el-icon>
						<span style="font-size: 14px; margin-top: 10px">{{
              item.title
            }}</span>
					</div>
				</el-card>
			</el-col>
			<el-col :span="6" v-for="(item,index) in imgList" :key="index">
				<el-card :body-style="{ padding: '0px' }" class="cards">
					<img :src="item.img" style="width: 316px; height: 174px;" class="image" />
				</el-card>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	import {
		Clock,
		OfficeBuilding,
		PictureRounded,
		Reading,
		Refresh,
		Tickets,
	} from "@element-plus/icons";
	import {
		getCuteList
	} from '@/utils/product'
	export default {
		name: "headSpan",
		components: {
			Clock,
			OfficeBuilding,
			PictureRounded,
			Reading,
			Refresh,
			Tickets,
		},
		data() {
			return {
				currentDate: new Date(),
				imgList: [{
						img: "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/5d1892854c8bb165e755d68bde287d71.jpg?w=632&h=340",
					},
					{
						img: "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/28c13d0d11b38ec17fa5d83bc6ba5912.jpg?w=632&h=340",
					},
					{
						img: "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/28c13d0d11b38ec17fa5d83bc6ba5912.jpg?w=632&h=340",
					},
				],
				leftList: [{
						title: "保障服务",
						icon: "Clock",
					},
					{
						title: "企业团购",
						icon: "OfficeBuilding",
					},
					{
						title: "F码通道",
						icon: "PictureRounded",
					},
					{
						title: "米粉卡",
						icon: "Reading",
					},
					{
						title: "以旧换新",
						icon: "Refresh",
					},
					{
						title: "花费充值",
						icon: "Tickets",
					},
				],
			};
		},
	
	};
</script>

<style scoped>
	.time {
		font-size: 13px;
		color: #999;
	}

	.bottom {
		margin-top: 13px;
		line-height: 12px;
	}

	.button {
		padding: 0;
		float: right;
	}

	.image {
		width: 100%;
		display: block;
	}

	.clearfix:before,
	.clearfix:after {
		display: table;
		content: "";
	}

	.clearfix:after {
		clear: both;
	}

	.card {
		background: #5f5750;

		height: 98%;
	}

	.cards {
		width: 100%;
	}

	.card div {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		color: #cfccca;
		font-size: 25px;
		border-right: 1px solid #757575;
		border-bottom: 1px solid #757575;
		float: left;
		width: 33%;
		height: 87px;
	}

	.leftList :hover {
		cursor: pointer;
		color: #ffffff;
	}
</style>
